<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<ui:composition template="../template.xhtml">
	<ui:define name="content">
		<h:outputStylesheet library="css" name="richfaces.css" />
		<h1>Slots</h1>
		<h:form>
			<div>
				<h:commandLink value="New" action="#{slotsBean.editSlot}">
					<f:setPropertyActionListener
							target="#{slotsEditorBean.slot}" value="#{null}" />
				</h:commandLink>
			</div>
			<rich:dataTable value="#{slotsBean.slots}" var="slot"
				iterationStatusVar="it" id="tableSlots"
				rowClasses="odd-row, even-row" styleClass="stable"
				rows="#{slotsBean.recordsPerPage}">

				<!-- Telo tabulky -->
				<rich:column sortBy="#{slot.name}" id="name"
					sortOrder="#{slotsSortingBean.nameOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Name" render="tableSlots"
							action="#{slotsSortingBean.sortByName}" />
					</f:facet>
					<h:outputText value="#{slot.name}" />
				</rich:column>
				<rich:column sortBy="#{slot.sector}" id="sector"
					sortOrder="#{slotsSortingBean.sectorOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Sector" render="tableSlots"
							action="#{slotsSortingBean.sortBySector}" />
					</f:facet>
					<h:outputText value="#{slot.sector}" />
				</rich:column>
				
				<rich:column sortBy="#{slot.capacity}" id="capacity"
					sortOrder="#{slotsSortingBean.capacityOrder}">
					<f:facet name="header">
						<a4j:commandLink value="Capacity" render="tableSlots"
							action="#{slotsSortingBean.sortByCapacity}" />
					</f:facet>
					<h:outputText value="#{slot.capacity} kg" />
				</rich:column>
				
				<rich:column>
					<!-- Linka na Vymazanie zaznamu -->
					<h:commandLink value="Edit" action="#{slotsBean.editSlot}">
					<f:setPropertyActionListener
							target="#{slotsEditorBean.slot}" value="#{slot}" />
					</h:commandLink>
					<!-- Linka na Vymazanie zaznamu -->
					<a4j:commandLink execute="@this" render="confirmPane"
						oncomplete="#{rich:component('confirmPane')}.show()"
						value="Delete">
						<f:setPropertyActionListener
							target="#{slotsConfirmDeleteDialogBean.slot}" value="#{slot}" />
					</a4j:commandLink>
				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller page="#{slotsBean.page}" />
				</f:facet>
			</rich:dataTable>

			<!-- JQuery na stylizaciu tabulky -->
			<rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
			<rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
			<rich:jQuery selector=".stable tr" event="mouseover"
				query="jQuery(this).addClass('active-row')" />
			<rich:jQuery selector=".stable tr" event="mouseout"
				query="jQuery(this).removeClass('active-row')" />
			
			<!-- Potvrdzovaci dialog vymazania dodavatela -->
			<rich:popupPanel id="confirmPane" header="#{slotsConfirmDeleteDialogBean.title}"
				autosized="true">
        	<h:outputText value="#{slotsConfirmDeleteDialogBean.question}" /><br />
				<a4j:commandButton value="Yes"
					action="#{slotsConfirmDeleteDialogBean.submit}" render="tableSlots"
					execute="confirmPane"
					oncomplete="#{rich:component('confirmPane')}.hide();" />
				<a4j:commandButton value="No"
					onclick="#{rich:component('confirmPane')}.hide(); return false;" />
			</rich:popupPanel>
		</h:form>
	</ui:define>
</ui:composition>
</html>